<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ menuTitle.main }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ menuTitle.item }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="limitWidth">
        <div class="excelBox">
          <div class="excelTitle">
            <el-button type="primary" @click="exportExcel">导出Excel</el-button>
            <b>运营数据统计</b>
          </div>
          <div class="excelTime">日期：{{ reportData.reportDate }}</div>
        </div>
        <table class="exceTable" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="4" class="headBody">数据统计</td>
          </tr>
          <tr>
            <td width="20%" class="tabletrBg">本日新增用户数</td>
            <td width="30%">{{ reportData.todayNewUser }}</td>
            <td width="20%" class="tabletrBg">总用户数</td>
            <td width="30%">{{ reportData.totalUser }}</td>
          </tr>
          <tr>
            <td class="tabletrBg">本周新增会员数</td>
            <td>{{ reportData.thisWeekNewUser }}</td>
            <td class="tabletrBg">本月新增会员数</td>
            <td>{{ reportData.thisMonthNewUser }}</td>
          </tr>
          <tr>
            <td colspan="4" class="headBody">商品数据统计</td>
          </tr>
          <tr>
            <td class="tabletrBg">今日新增商品数</td>
            <td>{{ reportData.todayGoodNumber }}</td>
            <td class="tabletrBg">商品总数</td>
            <td>{{ reportData.totalGood }}</td>
          </tr>
          <tr>
            <td class="tabletrBg">本周新增商品数</td>
            <td>{{ reportData.thisWeekGoodNumber }}</td>
            <td class="tabletrBg">本月新增商品数</td>
            <td>{{ reportData.thisMonthGoodNumber }}</td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 面包屑导航标题
      menuTitle: {
        main: '',
        item: ''
      },
      reportData: {
        reportDate: '',
        todayNewUser: 0,
        totalUser: 0,
        thisWeekNewUser: 0,
        thisMonthNewUser: 0,
        todayGoodNumber: 0,
        totalGood: 0,
        thisWeekGoodNumber: 0,
        thisMonthGoodNumber: 0
      }
    }
  },
  created() {
    this.getMenuList()
    this.getReportValue()
  },
  methods: {
    // 获取面包屑导航标题
    async getMenuList() {
      const { data: res } = await this.$axios.get('/menu/getMenuList.do')
      if (!res.flag) return this.$message.error(res.message)
      // 获取当前激活路径
      const activePath = window.sessionStorage.getItem('activePath')
      // 循环判断激活路径对应的路径名称
      res.data.forEach(value => {
        value.menuItem.forEach(item => {
          if (item.path === activePath) {
            this.menuTitle.item = item.title
            this.menuTitle.main = value.title
          }
        })
      })
    },
    async getReportValue() {
      const { data: res } = await this.$axios.get('/reports/getReportValue.do')
      if (!res.flag) return this.$message.error(res.message)
      this.reportData = res.data
    },
    exportExcel() {
      window.location.href = 'http://localhost:82/reports/exportBusinessReport.do'
    }
  }
}
</script>

<style lang="less" scoped>
.excelTitle {
  text-align: center;
  overflow: hidden;
  line-height: 40px;
  color: #e6e6e6;
}

.excelTitle .el-button {
  float: left;
}

.excelTime {
  color: #fff;
  padding: 10px 0;
  text-align: right;
  width: 790px;
}

.exceTable {
  width: 100%;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
  color: #fff;
  margin-left: 180px;
}

.exceTable tr,
.exceTable td {
  border-left: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.exceTable .headBody {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.limitWidth {
  width: 800px;
  padding: 20px;
  margin-bottom: 180px;
}
.excelBox {
  margin-left: 180px;
}
</style>
